Vamos a instalar unas en forma de pestaña según Leonel Alvarado en su blog Trucos Bogger
Una vez tengamos los post etiquetados nos dirigimos a:
Plantilla/Edicion de Html/Expandir plantillas de artilugios.

Buscamos esta línea de código:

<b:section class="header" id="header" maxwidgets="1" showaddelement="no">

Y la sustituimos por esta:

<b:section class="header" id="header" maxwidgets="2" showaddelement="yes">


Luego buscamos:]]></b:skin> y justo antes añadiremos este código:

/*- Menu Tabs B--------------------------- */

#tabsB {
float:left;
width:100%;
background:#F4F4F4;
font-size:93%;
line-height:normal;
}

#tabsB ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}

#tabsB li {
display:inline;
margin:0;
padding:0;
}

#tabsB a {
float:left;
background:url("http://exploding-boy.com/images/cssmenus/tableftB.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}

#tabsB a span {
float:left;
display:block;
background:url("http://exploding-boy.com/images/cssmenus/tabrightB.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}

#tabsB a span {
float:none;
}

#tabsB a:hover span {
color:#000;
}

#tabsB a:hover {
background-position:0% -42px;
}

#tabsB a:hover span {
background-position:100% -42px;
}

Por último nos situaremos en esta parte de código:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title><h2>
<b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Y reemplazaremos la anterior de color azul por esta:

<b:widget id='Label1' locked='false' title='' type='Label'>
<b:includable id='main'>
<div id='tabsB'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Inicio</span></a></li>
<b:loop values='data:labels' var='label'>
<li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>
</b:loop>
</ul>
<!-- <b:include name='quickedit'/> -->
</div>
</b:includable>
</b:widget>

En la siguiente imagen podemos ver una tabla de colores con las diferentes etiquetas creadas para un menú, pero es perfectamente aplicable a las etiquetas en forma de pestaña para las categorías que explicamos en esta entrada.

Imagen obtenida de Exploding-boy gracias a U.B.H

Cuando decidas el color para tus etiquetas en forma de pestaña puedes encontrar el código correspondiente a cada color AQUÍ


Si decidimos cambiar nuestras etiquetas por otro color, no olvidemos que también debemos cambiar la letra de la etiqueta en el último código (rojo) justamente donde dice:
<b:includable id='main'>
<div id='tabsB'>
<ul>


Y un acosa más... aunque ahora Blogger nos da la posibilidad de recuperar la anterior plantilla, nunca está demás tener una copia guardada ;)
Anónimo

Hola Gema! He seguido todos los pasos que dices para poner las pestañas en un blog que uso para hacer pruebas pero me aparecen en la barra lateral del blog, como si fuera un apartado dentro de esa barra. ¿Sabes porqué puede ser esto y cómo solucionarlo para que me salgan debajo del título como a tí?
Muchas gracias, saludos! ^^

Responder
Gem@

Hola efecinco, es muy sencillo de hacer.
Situate en Plantilla/Elementos de pagina.
Luego busca el cuadradito que dice ´´Etiquetas`` y arrastralo hasta llevar al lugar que deseas ponerlo.
Es la nueva funcion de Blogger llamada Drag and Drop o en español: Coger o Soltar

Responder
Anónimo

Vaya..que cosa mas tonta, jeje! Gracias ^^ Lo que pas que lo he puesto debajo del título y me las inserta justo enimca de la imagen de mi cabecera,no debajo, y entonces no queda bien. He intentado arrastrarla más hacia abajo pero no me deja, el siguiente sitio donde me deja "soltar" las etiquetas es encima de los posts pero tampoco queda bien. Bueno..en otro rato seguiré investigando cómo hacer para que no me tapen el título.. Gracias de todas formas :)

Responder
Anónimo

Hola Gem@, excelente post explicativo acerca de las pestañas, sinceramente siempre me ha llamado mucho la atención los menús de pestañas, son muy útiles, la verdad tienen la misma funcionalidad que tu menú de texto pero para mi blog actual me vendrían de perlas, he estado intentando añadir pestañas a mi blog pero como sabes ahora estoy en la Coctelera y se diferencia de blogger, entonces el código no es el mismo pero de todos modos me lo estudiaré cuando tenga tiempo y lo intentaré aplicar, gracias.

Me gustaría saber si has podido ver tu diseño colocado en mi cabecera, besos.

Responder
Anónimo

Siento ser pesada pero..te importaría pasarte por mi blog para ver el resultado? Es por si se te ocurre cómo hacer que aparezca debajo de mi cabecera, y no enmedio.
Muuuchas gracias, un saludo!

Responder
Anónimo

Vaaale..lo logré! xD No se ni como..toqueteando el código HTML al final ha quedado algo más parecido a lo que yo quería. Gracias de todas formas y perdona las molestias ^^

Saludos!

Responder
Gem@

Hola Sir: Estoy segura que un día de estos conseguirás poner pestañas a tu blog.
He visto el diseño de logo con Explorer, no así con Firefox porque aún no he instalado lo que me comentaste, es que los días son muy cortos y da la sensación que cada vez tienen menos horas, ya me entiendes ;)
Yo creo que ha quedado original el logo, a mi personalmente me gusta bastante y coordina con los colores de tu espacio, de todas formas los demás también son buenos.
Tengo que informarte que cuando comentas aquí, queda tu enlace al antiguo blog de Blogger, no lo veo mal. Pero es una pena no dejes el rastro a tu nuevo blog porque seguro es de interés general para todos y es una lástima no darlo a conocer un poco más.
Para dejar tu nuevo enlace comenta como ´´Otros`` o ´´Un usuario diferente``

Efecinco: ¡Están muy bien las categorías ¡ Y escogiste perfectamente el color de tu blog para ellas.
* Felicidades *

Responder
Anónimo

ola gemma, a ver la primera parte muy bien, muy claro pero cuando dices por ultimo buscar esta texto en la plantilla: b:widget id='Label1' locked='false' title='Etiquetas' type='Label'........
creo q he mirado ya 7 veces mi plantilla de arriba abajo y te aseguro q no esta en ningun lado, si me dijeras qpuedo hacer te lo agradeceria cielo,1bso

Responder
Gem@

Saludos adrianeuqirne: No me extraña que no lo veas porque a mi me costó también lo suyo encontrarlo.
Situate en:
<!-- skip links for text browsers -->
Unas 7 líneas más abajo está ese código ;)

Responder
yo miSma

necesito ayuda...
Se ha encontrado más de un artilugio con el ID: Label1. Los ID de artilugio deben ser exclusivos.
esto q significa..?
Quiero llorar...

Responder
Gem@

Yo misma: A mi entender quiere decir que hay un error al aplicar el código, estas aplicando con este código un nuevo Label y la plantilla solo acepta los exclusivos de Blogger.
Pero no te asustes, son mensajes que salen cuando algo no está bien.
Intenta aplicarlo paso a paso tal y como las explicaciones y verás como a final sale bien.
Si sigues teniendo problemas mándame copia de tu plantilla, intentaré ayudarte.

Responder
yo miSma

gemita voy a optar por que veamos mi plantilla , a ver que pasa, mi msn es evitta000@hotmail.com

Responder
Gem@

Saludos yo misma:
Haremos una cosa... clica en tu plantilla y luego en Edición de HTML, después clica en expandir plantilla de artilugios.
Copia toda la plantilla y la pegas en un archivo de texto.
Luego me lo mandas a este correo: forevergema@gmail.com
Así veo la plantilla e intentaré ver donde está el error.

Responder
Andrés

Una pregunta. ¿Puedo elegir qué etiquetas van a aparecer en las pestañas, o sí o sí se verán todas las etiquetas que tengo? Porque me gustaría poner sólo las cinco o seis grandes categorías en las que se divide el blog.

Un saludo

Responder
Gem@

Saludos Lord Henry: En las pestañas de las categorías aparecen todas las etiquetas que tengas en el blog.
No puedes escoger sin son cuatro o cinco, porque se van formando conforme etiquetas las entradas o post.
De manera que si tienes diez etiquetas aparecerán diez pestañas.

Responder
enrique

Estimada Gem@, muy interesante ésto de las pestañas, pero la pregunta mía es cómo haces esas pestañas de tu blog, las de arriba de todo, bajo el titulo de tu blog blog.
Gracias!

Responder
Gem@

Hola Enrique, las hice siguiendo los pasos en esta misma entrada, luego jugando con el código cambié el color que sale cada vez que pasas el ratón encima de una categoría.
Es también posible hacerlo de manera que las pestañas salgan en diferente color, Leonel explica en su blog el código a poner según el color que deseas para las pestañas.
De todas formas si tienes dudas no te quedes con las ganas de preguntar :)

Responder
enrique

Entiendo, Gem@, pero me refería a cómo hacés los vínculos, está bien que es sencillo lo de las etiquetas en forma de pestañas, etc., pero lo que no entiendo es cómo estableces los vínculos a "herramientas", "cosicas mías", "trucos beta", etc etc.
No sé si me explico ahora.

Responder
Gem@

Los vínculo se crean solos una vez etiquetamos las entradas y aplicamos los códigos de las categorías en forma de pestaña.
Es obvio que cuando clicas en una pestaña ejemplo... Herramientas se visualizan todas las entradas que etiquetamos con la categoría de herramientas.
Es muy sencillo, si te da un poquito de miedo jugar con la plantilla intentalo en un blog de pruebas, lo puedes crear sin salir de Blogger, y optar para que no sea visible en tu pefil ;)

Responder
Noa-

He intentado crear las etiquetas a través de la opción que ofrece ahora el blog, pero cuando le doy a uno de los links de las etiquietas no salen todos los posts de esa etiqueta.
Seguro que hago algo mal

Saludos

Responder
Gem@

Hola Noa- has probado si salen clicando en la parte de abajo donde dice : Entradas recientes o entradas antiguas?

Responder
Noa-

Pues no, no lo había probado. Pensé que al darle a una etiqueta salían todos los posts publicados en ese apartado.
Ahora ya se como hacerlo.

Muchas gracias.

Que haríamos sin ti? Tendríamos que inventarte :-)

Saludos

Responder
carlos

UN SOLO PROBLEMA ....NO PUEDO PONER LAS EN UN BUEN LUGAR POR QUE O ME QUEDAN ARRIBA DE LA IMAGEN DEL TITULO O ME QUEDAN ARRIBA LA ENTRADA..... ME PUEDES AYUDAR POR FAVOR?

Responder
carlos

ya lo logre .....jugando con la plantilla......

Responder
Gem@

Perfecto Carlos, por si alguien no lo sabe eso se soluciona arrastrando las etiquetas hasta el lugar deseado :)

Responder
La Periodista en Paro

Hola Gema! Es genial tu blog, acabamos de crear un blog unos amigos y yo y, la verdad, tenemos poca idea de diseño y de html. Intentando hacer el tema de "menús expandibles" di con tu blog y...q mala sueeerrrte! (y no pq no esté bien, sino pq yo no debo estar muy bien d la cabeza y m encanta todo esto, y ver q s pueden hacer tantas cosas...m estoy volviendo más loca aún...es genial, eres genial!!! [sí, estoy en un momento de efusión máxima...disculpame xD]). La cuestión es q he intentado hacer esto de las etiquetas y ...en mi super codigo html no aparece esta parte:
/b:includable
/b:widget

(He quitado los corchetes, pq sino no m deja publicar el comentario)

Con lo cual, cuando intento substituir, s keda un poco loco.

Q puedo hacer? Muchiiiiiiiiiiiisiisisisisisimas gracias de antemano!!!

Responder
La Periodista en Paro

Bueno, otra cosa q, no sé como, he solucionado finalmente !!! Si al final voy a poder hacerlo sola. No me lo puedo creer xDD

Responder
Neo X Free

Hola GEM@ nos podrias hacer una guia de como diseñar y mejorar lo estilos de blogger para que parescán una pag. web; Adios.

Responder
Gem@

Hola periodista¡ siempre dije que probado o haciendo y deshaciendo es como mejor se aprende ;)
Sigo tus progresos de cerca...

Hola polo0.2 es muy complicado eso que me comentas, pero lo es porque no tengo idea de lo que puedes esperar de esa página ¿Va a tener archivos? ¿Categorías? ¿Es para fines comerciales? ¿Con dos sidebar?
Como verás el abanico de posibilidades es muy amplio, y todo depende del gusto de la persona o la finalidad de esa Web, de todas formas hay en Internet numerosas plantillas para el nuevo Blogger, date una vuelta por la categoría de plantillas que hay debajo de mi logo estoy segura que encontrarás algo acorde con lo que buscas;)

Responder
dn-z

Hola Gema

Tengo un problema respecto a las pestañas, ya me tiene loco... Las pestañas me resultan super bien, pero el problema es que no se como dejarlas abajo de la foto que tengo en la cabecera, no tengo opción para eso, me queda sobre la foto o sobre las entradas y lo que yo quiero es que me queden bajo la foto, como las tienes en tu blog.

http://img47.imageshack.us/img47/7991/dibujodr0.jpg

Ya te habian preguntado lo mismo pero no hubo respuesta a ese problema y como tu tienes las categorias donde me gustaría tenerlas creo que sabes la respuesta.

He buscado en varios lados y encuentro la misma pregunta pero no la respuesta :(

Te agradecería bastante si me ayudas con esto. En tu blog he solucionado casi todas las dudas que he tenido sobre el blog y espero que esta sea una de esas veces.

Aqui te puedes fijar como me quedan.

http://paginadelass.blogspot.com

De antemano muchas gracias

DN-Z

Saludos

Responder
Gem@

Saludos dn-z las pestañas se sitúan en el lugar deseado arrastrándolas, como cuando aplicas un artilugio en Plantilla, buscas un cuadradito que dice ´´Etiquetas``y los vas moviendo(arrastrando) hasta colocarlo debajo de la imagen del logo...
Yo creo que si contesté a un comentario sobre ese tema pero por si no hablamos del mismo ayúdame a localizarlo por favor no me gusta dejar a nadie sin respuesta ;)

Responder
dn-z

Gemita:

Gracias por la preocupación, yo entiendo eso de las etiquetas, también entiendo y sé como arrastrarlas pero me da solamente dos opciones que te las mostraré gráficamente:

La primera opción que me sale es debajo de la cabecera. (Contenidos = Etiqueta)

Foto 1

La segunda opción es sobre las entradas, pero no me gusta como quedan

Foto 2

Al ponerle una cabecera no me soluciona el problema, tampoco volviendo a poner los bordes, he intentado varias cosas pero no me resultan, si sabes de algo me podrías ayudar, te lo agradecería mucho.

Muchas Gracias

dn-z

Responder
Gem@

Yo las tengo como en tu blog de pruebas, y arrastrarlas es la única opción que sé para ponerlas en un lugar en concreto.

Te mando imagen que la veas por si te es de ayuda o guia.

Responder
dn-z

Hola de nuevo Gema

Me acabo de dar cuenta que a ti te sale la foto, por eso no tienes problemas al ponerlo... si te diste cuenta en las fotos que te mande a mi no me sale la foto de mi blog como a ti.

La solución a mi problema es que me aparesca la foto de mi blog sobre "añadir un nuevo elemento" como en tu foto.

http://img185.imageshack.us/my.php?image=fsscr187bc7.jpg

Ahora tengo otra duda, como hago para que aparesca mi foto ahí?

Uffff! ... ojalá supieras esa respuesta, con eso estaría todo solucionado.

Me despido muy agradecido por la preocupación, se nota la gente que vale.

GRACIAS

dn-z

Responder
Gem@

Me di cuenta que la imagen de tu logo no aparecía pero eso no es extraño, depende el lugar donde la añadas.
Con tu permiso voy a tomar tu plantilla y aplicarla en mi blog de pruebas y te comento...

Responder
dn-z

Hola Gema

Te respondí el mail y minutos después me dedique a ver mi plantilla con calma, ya encontre el problema, resulta que como era mi primer blog empecé a hacer cosas con blogger antiguo y algunas cosas el BETA no las necesita. En fin, tenía esto que no tenía que estar.

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:0px solid $bordercolor;
}

#header {
margin: 5px;
border:0px solid $bordercolor;

height:250px;
width:600px;


http://img170.imageshack.us/img170/2468/mkkanodt6.gif
text-align: center;
color:$pagetitlecolor;


La imagen estaba sobre los limites que le tenía antes y quedaba ese espacio en negro, problema resuelto.

Muchas gracias por ayudarme con la foto, te pasaste... Realmente eres muy buena persona. Si alguna vez necesitas algo en que te pueda ayudar no dudes en contactarme conmigo.

Saludos dn-z

http://paginadelass.blogspot.com/
http://juegosdelass.blogspot.com/

Responder
EL ©UYO DEL MUNDO

yo te juro que hice todo pero cuando llego a b:widget id='Label1' locked='false' title='' type='Label'
no lo encuentro por ningún lado ni siquiera cerca de la referencia que diste.
GRACIAS GRACIAS Ayudame el presupuesto en Lexotanil es cada vez más elevado...
¡Aghh!
Seba

Responder
Gem@

¿ Pusiste Expandir plantillas de artilugios?

Responder
EL ©UYO DEL MUNDO

Sí pero no aparece esa parte. Estoy usando la plantilla Mínima, no sé tiene algo que ver.
Disculpá las molestias y el abuso de tu generosidad.
Saludos
Seba

Responder
EL ©UYO DEL MUNDO

Definitivamente el código que mencionas en color azul referido a "Etiquetas" no lo tengo. Suprimí el blog y armé uno nuevamente y tampoco aparece. ¿que macana me estoy mandando?
Seba

Responder
Gem@

Qué plantilla estás usando una antigua o una nueva de Blogger?
Esta aplicación es para una plantilla de las denominadas Blogger beta.

Responder
EL ©UYO DEL MUNDO

LA NUEVA LA NUEVA!!!! BETA BETA
Oh! !! soy un inutil.
Definitivamente.
No entiendo nada
Permiso, me voy a hacer un arakiri
HELP!!!!! mi plantilla me engaña

Responder
Gem@

Veamos... aguanta un poco y deja el arakiri para más adelante que para eso siempre queda tiempo :)
Escucha... ¿Por qué no haces un blog de pruebas e intentas aplicar el código para ver si es que has eliminado algo de tu plantilla que no recuerdes?
Las categorías no van a poder más que tu digo yo ¿no?

Responder
EL ©UYO DEL MUNDO

Estoy haciéndolo en un blog de prueba. Lo suprimí arme otro, cambié de plantilla. Suprimí armé otro y así. Te juro que no veo la última parte de "etiquetas".
Si querés te mando la plantilla para que veas que no estoy loco. Hice todo lo que me dijiste antes. Todo va bien pero no veo la parte de "etiquetas"
Te pido mil disculpas por tantas molestias. Puede que haya algo fuera de la, en alguna opción o algo que no esté habilitado????

Responder
Gem@

Me preguntaba si hiciste el primer paso el de etiquetar las entradas.
Luego en un comentario creo que dijiste que tu plantilla es Minima y me he fijado que es una plantilla Rounders.
En el primer paso de las explicaciones que yo doy en esta entrada hay una pequeña diferencia entre la plantilla Minima y la Rounders, y en el último también, pero si están la línea de dice ´´etiqueta`` ;)

Probando otro recurso he aplicado esa plantilla a mi blog de pruebas, he instalado las pestañas incluso puse un código para que fuera en color verde y de esta forma fuera acorde con el color del blog.

De todas formas he dado salida a una entrada con las explicaciones para que las sigas paso a paso si así no te resulta ya solo queda hacerte el arakiri jajaja
(sorry no he podido evitarlo)

Si prefieres las pestañas de otro color tiene fácil solución (pero una vez las tengas aplicadas en el blog)

Responder
Gem@

Una cosa más... como es que en el código fuente de tu blog sale que es la plantilla Rounders y sin embargo la sidebar queda abajo?
¿Está modificada la plantilla por ti?
Mira aquí esto es una plantilla
Rounders

Porque si me dices que no, te ayudo con el arakiri jajaja

Responder
Jose, a secas
Este comentario ha sido eliminado por el autor.
Responder
Jose, a secas

Hi Gem@:

Estoy intentado cumplir con mi nuevo proposito de poner las pestañas en mi blog eCulinariae pero al intentar visualizar la vista previa de la plantilla me sale esto:

No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The element type "b:section" must be terminated by the matching end-tag "".


La he repasado mil veces pero nada, sigue con el mismo error y no lo entiendo porque lo hice en mi blog de pruebas y me sale perfectamente.

Un saludo,

JmpaSrgc

Responder
Gem@

Procura cuando hagas las pruebas utilizar una plantilla igual a la que deseas añadir el cambio.
La plantilla que ahora utilizas es diferente a la original de Blogger.
Hazlo paso a paso, mira bien al copiar no omitas nada.
Esta entrada la hice al mismo tiempo que añadía las pestañas de la plantilla aún así lo repasé porque Cuyo tenía problemas y te puedo asegurar que funciona sin errores.

Responder
la-filistea

Gracias Gema, me ha servido de mucho tu consejos...

Muuuuchas gracias de nuevo.

Responder
Gem@

La Filistea gracias a ti por comentar ;)

Responder
Ignativs

Hola Gema, lo primero es darte las gracias por todo lo que nos das y que a los novatos como yo nos ayuda mucho. Estoy intentando hacer las pestañas y lo he logrado en parte, porque en Firefox (que es el que utilizo) quedaban casi ocultas, mientras que en Explorer se veían bien; he retocado algo el código poniendo padding:0px 10px 0px 50px que al principio estaba como padding:10px 10px 0 50px en #tabsF ul; ahora se ve nejor en Firefox y un poco peor en Explorer porque se solapa, pero bueno, se ve los suficiente.
Si sabes a qué se debe te agradecería me lo dijeras, si lo averiguo yo te lo cuento.
Mi blog incipiente y que no estoy muy seguro de lo que voy a contar es ignativs.blogspot.com, para que veas como quedan las pestañas.
Una vez más gracias.

Responder
Gem@

Tienes mucha suerte Ignativs que puedan visionarse en los dos navegadores, yo tuve que modificar lo mismo que hiciste tú pero dejando las pestañas del tamaño que ves, aunque no me importa porque son muchas y ´´afean un poco tanta pestaña``
El caso que no se puede luchar contra los navegadores, muchos solo se preocupan del aspecto de su blog con el navegador que usan, se asustarían si vieran cono otros ven su blog :(
Sólo puedo decirte que hiciste lo acertado ;)

Responder
Ignativs

Gracias por responder tan rápido Gema. Siempre intento comprobar las cosas en Firefox y Explorer, cada uno tienen sus peculiaridades bastante irritantes; aunque prefiero Firefox, por desgracia éste en el nuevo blog, no sé si pasa en la versión anterior, se queda bloqueado cuando estoy modificando la plantilla y tengo que hacerlo con Explorer.
En cuanto al diseño de tu blog, se ve casi igual en los dos navegadores y me parece que también te preocupas mucho del aspecto, por lo que te felicito y me gusta mucho la plantilla que usas y cómo la tienes dispuesta, la tipografía y todo y, la verdad, cuando entras en un blog de ayuda como el tuyo se agradece muchísimo la claridad.

Responder
Gem@

Hola Ignativs me gusta lo que dices y llevas razón, intento que el aspecto de blog sea lo menos recargado posible sin descuidar el contenido que es lo importante.
Algunas veces pongo accesorios en la sidebar para mostrar el efecto pero siempre termino por dejar lo mínimo.
¿No has pensado en poner las pestañas de color café?

Responder
Anónimo

Hola Gema, tienes razón en el color de las pestañas y tomo nota. Ahora estoy en fase de pruebas de plantillas, colores, contenido y utilidades; me encantan los widgets pero reconozco que recargan y es difícil renunciar a algunos que quedan muy bien pero son poco útiles. Gracias por tu consejo. Ahora seguramente sólo haré cambios de prueba, porque por desgracia me he encontrado con un Ignativs.com que trata además algo muy parecido a lo que quería yo, así que me tendré que replantear el proyecto.
Gracias y te seguiré visitando.

Responder
Gem@

Aquí estaré Ignativs ;)

Responder
Antonio Manfredi

Hola Gema.
Lo he intentado aplicar en varias ocasiones y no hay manera.
Solo consigo que arriba de el titulo de mi blog salga todo el codigo css.
Me podrias ayudar de alguna forma.
Gracias.

Responder
Gem@

Saludos Admin debo llegar tarde en tu ayuda porque no veo ese código y he probado con diferentes navegadores :(

Responder
Lucía

El vínculo de Trucos Blogger me da error ...

Y tampoco puedo acceder desde cualquier otro vínculo ...

Lo han eliminado??

Responder
Gem@

Llevas razón Lucía tiene un poco de historia pero voy a ser breve.El autor de Trucos Blogger "Leonel Alvarado" ha cedido su blog y lo administra Cronos,Kurodesu, y no sé si algún integrante más, laurl es la siguiente:
http://www.trucosblogger.com/index.html

Responder
Anónimo

OLA GEMA MIRA SEGUI TODO PERO ME LO PONE EN LA BARRA LATERAL NO SE SI ME PUEDAS AYUDAR PORFAVOR MIRA MI CORREO ES DANIELBMZ@HOTMAIL.COM

Responder
Abraham Rojas

hola gema... que tal!

Cambie mi plantilla y ahora estoy volviendo a poner las pestañas.. pero tengo una duda, como le hago para cambiarles de color, recuerdo que en el blog de leonel decia como, ya he enctrado a trucos blogger pero no encuentro ese post.. podrias ayudarme y decirme como pro favor...

Saludos y un gran abrazo!!

Responder
Gem@

Daniel debes arrastrar la etiqueta hasta el lugar donde deseas ;)

Hola Abraham
Aquí tienes una página donde muestra los colores de las pestañas.
menus
Y aquí el código, según el color así es la letra a escoger.
Tabs

Suerte :)

Responder
Abraham Rojas

Hola otra vez!! Estoy intentando hacerle cambios al blog en cuanto a las pestañas, me dejaste el link pero no aparece el código.. como lo encuentro?? y otra cosa, puedes pasearte por el blog?? para que veaz como quedaron la pestañas y me indiques como las puedo dejar en una sola línea??

Saludos y Abraham Cielo azul te lo agradecemos

Responder
Abraham Rojas

jajajaja ya vi de donde puedo copiar el código de acuerdo a la pestaña, pero ninguna funciona, e menos que ponga la F que sucede?

Responder
cielo azul

gema???? no te olvides de nuestra duda por favor!!!!!

saludos!

Responder
Gem@

Puede suceder que añadiste la etiquetas con "cualquier letra" pero omitiste cambiar la letra en otra parte del código.
Me explico.. cada vez que cambies de letra (color de pestañas) debes también cambiar la letra que aparece en el último código que modificamos.
He señalado en esta misma entrada con un recuadro la parte de código donde debes cambiar también la letra de la etiqueta.
El que no te aparezcan todas horizontales y vayan formándose debajo es debido a que les falta espacio. Se irán agrupando conforme vayas agregando etiquetas ;)

Responder
Abraham Rojas

Saluditos gem@ y perdona tanta molestia, te he reenviado un correo para que veaz el resultado de hacer lo que me haz indicado desde la vez pasada tengo este error y no supe que hacer.... espero puedas orientarnos, gracias!!!!


saluditos!!!!

Responder
Unknown

Hola GEMA!!
Quisiera saber cómo puedo editar las pestañas de categorías para hacerlas más acordes a mi blog (escrachelamadrid.blogspot.com), en cuanto a colores y fuentes
Gracias.

Responder
Gem@

Abraham KRIC no he visto ese correo :( quizás por no conocer el remitente se perdiera en la carpeta de spam. Puedes reenviarmelo y en asunto pon Abraham que lo localice.


JAESRI en la entrada proporcionaba unos enlaces con los datos que me pides, pero he creído oportuno mostrarlo con una imagen y alojando los códigos en mi servidor por si en algún momento esos enlaces dejaban de funcionar.
Así que espero te sea útil ;)

!Suerte¡

Responder
Unknown

Hola Gema!!
Gracias por tu pronta respuesta...
Pero debo decir que no sé por qué razón no me anduvo...y encima casi pierdo todo el trabajo anterior hecho...
Sería mucha molestia si yo te mandase el html de mi plantilla para que vos lo acomodes??
Gracias por todo...

Responder
Gem@

Claro que no es molestia, estuve mirando las etiquetas que añadiste, y creo que el problema es porque aunque agregas el código para las etiquetas de un color diferente luego no añades esa letra en el último código como indica la entrada.
Por ejemplo si añades las etiquetas color naranja debes agregar el código de las etiquetas /*- Menu Tabs I--------------------------- */
Y después donde dice:
<b:includable id='main'>
<div id='tabsF'>
<ul>

debes sustituir tabsF por tabsI
Este último paso es que nos hace posible que las nuevas etiquetas puedan visionarse en vista previa ;)

Responder
Abraham Rojas

Gema?? Como estas?? tengouna duda si haz recibido mi correo???

saludos y perdona tanta molestia!!!

Responder
Gem@

Lo he recibido Abraham y es la tarea pendiente que me propuse para hoy.
En estas fechas navideñas tengo más trabajo (no me refiero al del blog sino a mi trabajo) por ese motivo no te he contestado.
Lo dicho... para luego tienes respuesta, o mañana según la diferencia horaria.
Y no es molestia ;)

Responder
Gem@

Abraham
Primero... las pestañas (botones) y según explicaciones van debajo de del header es decir justo debajo del logo, en la "section del header"
En tu plantilla esa parte está a la izquierda y no en la parte central del blog. para agregarlas haría falta añadir una sectión al main de manera que nos apareciera donde tu deseas, en la cabecera de las entradas.
Aún así hay otro inconveniente y es que es imprescindible etiquetar las entradas. Esa es la función de las pestañas hacer de enlace cada botón con la categoría o etiqueta correspondiente.

Lo que tu deseas no es enlazar etiquetas ni categorías ya que no las agregaste a tu blog, pienso que si tu idea no es etiquetar las entradas y dejar el diseño del blog como ahora lo más conveniente es crear un menú, la función sería que cada botón haría de enlace tal y como lo deseas con
* Inicio
* Actores
* Contacto
* Director
* Galería
* Repertorio
* Talleres
Para hacerlo es necesario crear en el main (lugar de las entradas) un elemento de página de diseño (widgets)donde incluir el código para el menú.
Una vez lo tengas ya podrás añadir el menú. Recuerda que el código debes añadirlo clicando en añadir un elemento de página/HTML/Javascript

Hay varios modelos de menús aquí puedes ver alguno 1-2-3-4-5- puede que me deje alguno más, de todas formas en el blog de César puedes ver más menús.Pero ojo... visIona la página con diferente navegador porque a veces nos llevamos sorpresas y es mejor evitarlas.
Y otra cosa... el espacio que tienes para añadir el menú no es suficiente para los 7 enlaces que deseas añadir.
Una de dos o suprimes enlaces o le das anchura al blog.
Te dejo un ejemplo de lo segundo y de las medidas modificadas:
#outer-wrapper {
width:800px;
#main-wrapper {
width:650px;
#sidebar-wrapper {
width:150px;
Naturalmente todo esto es una referencia y puedes jugar modificando valores y viendo en vista previa.
(Haz copia de la plantilla antes de realizar cambios)
Y ante cualquier duda ya sabes donde encontrarme ;)
Siento extenderme tanto pero no encontré tu e-mail. :(

Responder
Gem@

Olvidé dejarte el ejemplo
Y la forma de añadir un elemento de página. ;)

Responder
la-filistea

Gema se me desaparecieron mis categorias arriba, es decir los botones no entiendo que pasó y eso que guardé la plantilla..

No se si me funciona el menú horinzontal para etiquetas???

Responder
Gem@

La Filistea lo he comprobado al parecer el servidor donde están alojadas las imágenes de las etiquetas (http://www.yourwebsite.com/) ha dejado de funcionar.
Voy a ver si te consigo la imagen en alguna otra parte y te lo hago saber aquí mismo.

Responder
Gem@

La filistea esta es la imagen de las etiquetas que tienes en tu plantilla.
No sé si me habré confundido ¿es la de color negro?
Si fuera así puedes hacer lo siguiente, busca en la plantilla la parte de código de las etiquetas donde dice:
background:url("http://www.yourwebsite.com/labeltabs/tableftH.gif") no-repeat left top;

Sustituye la dirección que está en negrita por:
http://img186.imageshack.us/img186/4562/tabrighthkn1.gif
Espero que resulte bien, sería buena idea que esa que guardes la imagen en tu PC y a ser posible la alojes en algún servidor y utilices la url de tu propio alojamiento, de esta forma si el lugar donde está alojada dejara de funcionar o el propietario del alojamiento cambiara la dirección de las imágenes (como ha pasado) no perderás la imagen ;)

Responder
la-filistea

Gracias Gem@!!
Déjame intento mira que ya me había acostumbrado.

Gracias!!!!!!!

Lo que pasa es que antes en este tema tu tenías un enlace a unos botones y como dice actualizado se perdió pero dejame intento.

Gracias, gracias, gracias.

Responder
la-filistea

No Gema no me funcionó, que pasará, te voy a contar que yo quise poner una de estas etiquetas y cuando intenté había guardado mi anterior plantilla y cuando la volví a subir simplemente ya no funcionó las categorías se quedaron sin botón..

No tienes el anterior tema donde mandabas a un enlace donde habían botones..

:( snif!

Responder
la-filistea

Gem@ no se si viste pero tambien se desaparecio la fecha de la publicacion de cada entrada.

No entiendo.

Responder
Gem@

Me he confundido al añadir un enlace en un comentario anterior a este te lo digo por si te llega en el seguimiento de comentarios.
Este es el que vale

Filistea ayer cuando miré el código fuente de tu blog tenías aplicadas las etiquetas en forma horizontal (como las que salen en la imagen de la entrada pero de color negro, con la letra H)
Hoy lo he vuelto a mirar, y en su lugar añadiste el código para el menú vertical(justamente el que explico en esta entrada.

Ahora me queda la duda porque no sé que es lo que deseas añadir
si las etiquetas en forma de pestaña horizontal o en vertical.

El enlace que dices que tenía antes de actualizar la entrada y que se veían las etiquetas es el de csspicstock para etiquetas verticales.
Luego añadí en horizontales otro pero las imágenes han dejado de funcionar y lo he tenido que sustituir por el enlace actual.

He buscado y buscado las imágenes de las etiquetas y al final he vuelto a actualizar la entrada añadiendo un archivo con los códigos de todas las etiquetas y las imágenes incluidas.

Si lo sigues paso a paso estoy segura que esta vez saldrá porque he probado en un blog y el resultado es satisfactorio.
Pero atención en no confundir las horizontales con las verticales, son completamente diferentes.

Siento las molestias causadas :(

Responder
Gem@

Que desaparezca y aparezca algo por sí sólo no es extraño en Blogger, hace meses que me desapareció el lápiz de acceso rápido y el sobre de mandar entradas por correo (aunque siguen teniendo función los enlaces)

Lo de la fecha comprueba en la plantilla de diseño, el Editar entrada no sea que por error no esté marcada la casilla.
Prueba también a editar una entrada de las que tienes publicadas, en la parte de abajo donde dice Opciones de entrada mira si está marcada la fecha.

Responder
la-filistea

Gema es que intenté poner las verticales a ver si funcionaban y tampoco funcionaron.

Y ahora volvía poner las horinzontales y volvió a quedar igual si las arrastro hacia arriba vuelve a quedar verticales y sin imágenes .

Gracias por toda tu ayuda, pero creo que ha de se blogger el que tiene problema.

Responder
Gem@

Es muy extraño, yo he probado y siguiendo paso a paso las explicacione de la entrada agregué las etiquetas horizontales en un blog de pruebas.
Si quieres mándame la plantilla en un archivo de texto a mi correo Filistea .

Responder
la-filistea

Ya te envie la plantilla Gem@.
Gracias!!

Responder
Gem@

La miraré amiga es que con estas fiestas llevo mucho retraso en contestar :(

Responder
Abraham Rojas

Hola gema, antes que nada te deseo un buen año!!!!

Y con rezpecto a tu respuesta si estan etiquetadas todas las entradas, lo que pasa es que esa parte no quiero que sea visible. Voy a habilitarlas nuevamente para que le des un vistazo.

Tambien ya modifique la cabecera del blog en la parte de las entradas y debajo coloque las etiquetas. Voy a poner en mi codigo la letra F que es con la única que si funciona en lo que me ayudas a resolver este dilema. Muchas gracias por tu tiempo y los correos a los que puedes escribirnos son: anaidsar@gmail.com y abrahamkric@gmail.com

Saludos!

Responder
Gem@

Como tú prefieras Abraham, pero yo me refería que para un menú no es necesario activar las etiquetas si no lo deseas.

Responder
Abraham Rojas

HAy gema!! estoy hecho un lío!!
no enteindo lo que dices!!!

Responder
Gem@

Veamos... hay que diferenciar dos cosas. Una cosa es añadir las categorías en forma de pestaña como indica la entrada de estos comentarios. El efecto sería que aparecen unos botones como los que tu agregaste con la letra F y es necesario activar las categorías (etiquetas) porque en los botones aparecerán todas las etiquetas de nuestro blog.

Otra cosa distinta es un menú. Un menú nos muestra botones con los enlaces que nosotros añadimos y no es necesario etiquetas las entradas ni activar las categorías.

Lo que yo haría sería intentar suprimir todo lo que hiciste, e incluir un menú empezando de cero.
De todas formas piensa que esa plantilla no tiene demasiado espacio para incluir todos los enlaces que deseas en una misma línea, es lógico que pasen a ocupar una segunda línea por eso te sugerí ensanchar el blog en el otro comentario y te puse un ejemplo para que veas un menú.
De todas formas si decides dejar el otro código con la letra F adelante ;)

Responder
beatrice

Hola Gema,
he leído que esta aplicación es solo para plantillas beta o algo así,
que quiere decir eso?
como se si es beta o no.. estoy utilizando la plantilla mínima y el codigo de < b : widget id ='Label'...
no esta por ningún sitio!

gracias de antemano.

Responder
Gem@

Hola Beatriz, en efecto estas explicaciones son para plantillas de nuevo diseño de Blogger.
Puedes comprobar si tu plantilla es clásica si al acceder desde tu panel pone "Plantilla"
Si en lugar de "Plantilla" ves que dice "Diseño" es de las denominadas beta.

Responder
Anónimo

Muchas muchas gracias,
me había costado demasiado poder colocar una barra de pestañas.
quedó genial.

excelente explicación...
síolo tuve problemas al cambiar el estilo... pero jeje fue porque no habia leido del todo tu post..

de nuevo, muchas gracias..
salu2

Responder
Gem@

Felipe Del Río me alegra que te funcionara, hay que tener paciencia y hacer las cosas paso a paso ;)
Voy a ver tu blog ;)

Responder
Anónimo

Hola mira intento elegir un colo para el menu y lo copie y todo pero luego no se que hacer con esto id='tabsF' (y mas cosas)
dice que hay que cambierlo peor no entiendo que es lo que hay que cambiar si me explicas te lo agradeceria !

adios!
gracias!

Responder
Gem@

alou lo que debes hacer es ir buscando las parte de código que se indica y donde dice que debes sustituir quiere decir que debes eliminar un código en la plantilla y añadir el que se indica.
Cuando llegas al final dice que si deseas cambiar el color de las etiquetas por otro (se refiere si ya añadiste unas con anterioridad) debes cambiar también la letra de "tabs" en <b:includable id='main'> por otra (si tenías la F por ejemplo la cambias por la letra nueva)

Antes de hacer los cambios guarda copia de tu plantilla por si surgen errores.

Responder
tmc

Hola Gema;
En primer lugar enhorabuena por tu blog. He intentado poner estas pestañas en mi blog, ya que me parecen más bonitas que las que tengo ahora (e incluso podría colocar ambos tipos), lo que me sucede es que al tener muchas etiquetas no me gusta como quedan ya que salen en varias líneas. ¿Es posible elegir las etiquetas que aparecen en las pestañas y mantener el listado de etiquetas con todas ellas igualmente? Gracias. Alberto.

Responder
Gem@

Es posible Alberto pero no, con este manual de pestañas para las etiquetas.
Puedes crear un menú (hay con pestañas similares a estas y una variedad tan grande que estarás indeciso sobre cual escoger)
La idea es crear un menú con el número de pestañas que deseas tener, situarlo en la cabecera por medio de un elemento de página y una vez ahí a cada pestaña le agregas la categoría (etiqueta) que desees.
Cuando creamos el menú añadimos unas líneas a la plantilla y otras como te decía antes en un elemento de página.
En el elemento de página es donde añadimos los enlaces, un breve ejemplo sería:

<li><a href="url-de-la-categoría">Texto de la pestaña </a></li>

Para conseguir la url de una categoría lo que haremos será clicar sobre una categoría de las que aparece en tu sidebar "Próximos eventos" y copiamos la dirección que aparece en la barra del navegador para pegarla donde más o menos dice "url-de-la-categoría"
El texto de la pestaña lo añadiremos obviamente donde dice Texto de la pestaña.
El menú que ves en la cabecera de mi blog ha sido creado de esa forma, si clicas en Blogger verás que muestra los títulos de las entradas con la opción de desplegar la entrada entera. En el tuyo mostraría todas las entradas desplegadas.

Espero no haberte liado mucho ;)

Responder
Gem@

Olvidaba decirte que en mi nube de etiquetas encontrarás menús muy agradables y sencillos de aplicar ;)

Responder
Anónimo

Hola Gem@
en primer lugar queria agradecerte por ofrecer este sitio, del cual eh aprendido mucho.
Ahora llendo al tema, he creado un menu horizontal en mi pequeño blog, en forma de pestañas, quisiera saber de que manera podria separar los marcadores de las etiquetas, osea, poder poner mas etiquetas en un costado de mi blog sin que éstas se sumen a las pestañas, nose si se entiende.
Desde ya muchas gracias por darme la oportunidad de aprender.

Responder
Gem@

Saludos Lorian, se entiende perfectamente :)
En realidad no sabría decirte cómo hacerlo porque se trata de "separar" las pestañas y como puedes ver se agrupan en un mismo elemento que puedes arrastrar hasta situar en el lugar deseado.
Lo que si puedes hacer es crear un menú para la sidebar donde incluir unos botones lo más parecidos a esas pestañas o si lo prefieres con otro diseño. El menú también puede enlazar las categorías simplemente añadiendo la url que aparece en la barra del navegador cuando clicamos sobre una categoría.
No sé si me expliqué bien, cualquier duda házmelo saber ¿ok? ;)

Responder
Gem@

Hola de nuevo Lorian para que te hagas una idea mira esta entrada que habla sobre como crear un menú enlazando categorías.
Y este otro enlace es de un menú con pestañas muy similares al las que tienes sólo tendrías que sustituir la imagen de las CSS (background) por la misma que tienen tus pestañas.

Suerte ;)

Responder
Anónimo

Gem@ muchas pero muchas gracias por la rapida respuesta.
En estos dias comenzare a poner en practica lo que me has comentado y te molestare nuevamente si surge alguna otra duda.
Gracias!! :--)***

Responder
Fernanda Ruiz

hola... busco la manera de esncontrar todos esos enlaces que dices.... lo que aparece es esto.. y no lo encuentro¡¡¡

Responder
Fernanda Ruiz

es decir.. aparece un monton de letras... jajajajaja.... y no esncuentro nada de lo que dices¡¡¡ saves.. esto es tarea de informatica del cole¡¡¡¡ mi blog tambien lo hice en Diarios.es es: haz clik aqui porfa y dejame tus comentarios¡¡¡ jejejeje pero este blog no tiene pestañas y necesito uno con pestañas... por eso necesito me ayudes¡¡¡¡ gracias te quiero¡¡¡

Responder
Gem@

infor quizás lo mejor sería que añadas un menú.
Puedes crearlo y enlazar las distintas categorías de tu blog ;)

Responder
Agility Valencia

Buenas, he intentado hacer lo que comentas en nuestro blog pero me aparece este mensaje cuando, antes de guardar, quiero hacer una vista preliminar: "Se ha encontrado más de un artilugio con el ID: Label1. Los ID de artilugio deben ser exclusivos."

Como puedo solucionarlo? Gracias.

Responder
Gem@

Y así es, en tu plantilla ya tienes unas etiquetas añadidas, si buscas al final de tu plantilla verás que viene algo así:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'/>

donde Label1 cámbialo a Label2 guardas la plantilla y ahora no tendrás problemas para guardarla cuando realices estos cambios ;)

Responder
Marjo

Hola, gracias por los códigos, todo me funciono perfecto. El unico problema es que el link donde sale el código para cambiar los colores de las etiquetas no funciona y el azul no le queda bien a mi blog.... Si me pudieras dar el código para cambiarlo a cafe te lo agradecería un monton,
saludos :)

Responder
Gem@

Las etiqueta de color marrón tendrían más o menos este código puedes probar y mira en vista previa, si decides añadirlas lo que debes hacer es descargar las imagenes a tu PC, luego subirlas a una entrada cualquiera (la puedes dejar en borardor para que no se vea)
La url que te obtienes la añades en lugar de las imágenes de esa forma respetas en ancho de banda del autor de las imágenes y evitas que si un día las elimina dejen de verse en tu blog ;)

/*- Menu Tabs K--------------------------- */

#tabsK {
float:left;
width:100%;
background:#E7E5E2;
font-size:93%;
line-height:normal;
border-bottom:1px solid #54545C;
}
#tabsK ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsK li {
display:inline;
margin:0;
padding:0;
}
#tabsK a {
float:left;
background:url("http://exploding-boy.com/images/cssmenus/tableftK.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsK a span {
float:left;
display:block;
background:url("http://exploding-boy.com/images/cssmenus/tabrightK.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsK a span {float:none;}
/* End IE5-Mac hack */
#tabsK a:hover span {
color:#FFF;
background-position:100% -42px;
}
#tabsK a:hover {
background-position:0% -42px;
}
#tabsK a:hover span {
background-position:100% -42px;
}

Recuerda que al cambiar de color hay que cambiar también en:
<b:includable id='main'>
<div id='tabsF'>

sustituyendo tabsF por tabsk
<ul>

Responder
Marjo

Muchas gracias :D,
una última consulta que me ha complicado bastante, cada vez que hago una nueva etiqueta me agrega un nuevo boton, como puedo hacer para dejar unas 5 o 6 categorías principales y que todas las etiquetas me aparezcan en otra zona por ejemplo una nube de etiquetas(que pretendo agregar despues)....
Muchas gracias por todo :)

Responder
Gem@

yz Hola marjo0731 este sistema trabaja de ese modo creando automáticamente un botón por etiqueta.
La solución sería prescindir de este sistema y crear una nube con todas las etiquetas.
Para esas etiquetas principales se podría crear un menú donde añadir sólo las que tu quieres.

Responder
Marjo

Hola, entiendo, muchas gracias,
una última cosulta(sorry no me manejo en este tema) como puedo hacer para que una vez creados los botones, con mis etiquetas principales,al precionarlos me lleven(tal como las etiquetas) a todas las entradas con esa etiqueta aplicada??
muchas gracias :D

Responder
Gem@

yz Es muy sencillo pero más sencillo lo verás en esta entrada donde lo explico paso a paso.
Añadir, enlazar, configurar menús

Responder
Marjo

muchas gracias, te pasaste :D

Responder
Gem@

yz Cualquier duda ya me dices algo ;)

Responder
catadebrujas

Hola Gema, me dirijo a ti por si sabías cómo se hace para que aparezca esa especie de minilogo en las pestañas y tal en lugar del cuadradito naranja de blogger, he estado buscando por tu blog pero me he perdido un poco jejejeje. Gracias, un saludo.

Responder
Gem@

yz catadebrujas ¿enlas pestañas del menú?

Responder
edssin

Hola oye segui tu consejo paso a paso y no lo puedo hacer me sale lo mismo que a la chica de "yo misma" jaja ayuda porfis edssin@hotmail.es

Responder
Gem@

yz edssin los id deben ser únicos, no pueden haber dos iguales y por lo que se ve en un tu blog ya existe un id con Label1.
Es muy sencillo sustituye ese 1 por un 2 y veamos si resulta ;)

Responder
edssin

edssin: Hola no pude revisar ayer internet pero gracias por el comentario q linda..hoy lo hare haber q pasa...saluditos

Responder
edssin

mm jiji no tengo remedio jj me salio esto:
No hemos podido obtener una vista preliminar de su plantilla.
Por favor, corrige el siguiente error y envía la plantilla de nuevo.
El nuevo artilugio con el ID "Label2" pertenece a un tipo no válido: Labe2

help!!

Responder
edssin

Hola
hice lo que me dijiste pero no aparecieron los botones en la pagina, ya haciendo las etiquetas y todo....

Responder
Gem@

yz edssin dime en qué blog lo estás haciendo estos cambios, en tu perfil veo dos :)

Responder
Anónimo

hola gem@ necesito que ayudes si es posible,he provado mirado y vuelto a mirar y no hay manera de que me queden pestañas horizontales pa que lo veas mas claro:
- inicio
- etc
- etc (la raya es un punto de color y el texto sale subrayado)lo he provado tambien con explicaciones de otras paginas y con todo igual recurro a ti porque te descubri por un tutorial en scrid y ya he leido por hay que eres muy maja como Jmiur(no es peloteo) me he leido todos los comentarios ya he provado todo y nada te agradeceria si me puedes ayudar felicidades por tu blog.

Responder
Gem@

yz Saludos Nafire, he mirado tu blog y no veo los estilos añadidos (es la parte que añadimos justo antes de ]]></b:skin>
¿Estás segura que seguiste los pasos de esta entrada?

Responder
Steven O.

HOLA DISCULPA PERO TENGO UN PEQUEÑO PROBLEMA CON LAS CATEGORIAS Y ES QUE NO SE COMO CAMBIAR EL COLOR YA QUE EN ESA PAGINA NO ENCUENTRO NINGUN CODIGO PORFA AYUDAME

Responder
Anónimo

si segui todos los pasos lo que ahora hay como te he escrito en otro post he utilizado tu explicacion para poner etiquetas en horizontal que no me gusta nada pero de momento es lo unico que puedo hacer ya que repeti todo tantas veces que llegue al desespero incluso volvi a subir una plantilla nueva por si acaso pero ni con esas pero creo algun fallo hay en alguna parte por que si te fijas cuando vas a entradas antiguas donde pone entrada,etiquetas etc es de un color diferente y por mas que lo cambio en el apartado de colores no se modifica ni habiendo subido la plantilla nueva tu sabrias algo al respecto y sobre el menu de verdad que no se que hacer mil gracias

Responder
Gem@

yz ¿Qué color deseas añadir Fabian ?

yz Nafire para solucionar el problema de los enlaces debes establecer unos estilos, esos estiblos se añaden a todos los enlaces del blog.
Busca donde dice:
body {
background:#bca;
margin:0;
text-align:center;
line-height: 1.5em;
font: x-small Trebuchet MS, Verdana, Arial, Sans-serif;
color:#cceedd;
font-size/* */:/**/small;
font-size: /**/small;
}

A continuación añade:
a:link {color:#940f04;text-decoration:none;}
a:visited {color:#940f04;text-decoration:none;}
a:hover {color:#000; text-decoration:none;}

Con a:link es el color que vemos los enlaces.
a:visited cuando ese enlace ha sido visitado.
a:hover el color que muestra al pasar el ratón sobre el enlace.
Con text-decoration:none establecemos que no muestre subrayado.

El tema de las etiquetas debería verlo añadido para saber donde está el error.
Si te sirve de algo mira esta entrada

Responder
Anónimo

caray si que contestaste rapido eres una máquina ahora lo probare a ver que tal me sale, como he visto en twiter que vas tan liada no pense que fueras tan rapido muchas gracias por la ayuda ya te dire algo tanto si ok como si no gracias de nuevo :)

Responder
Anónimo

siento volver a molestarte pero nada como al principio que ya te endique que ya lo habia probado todo incluso he cambio la tabla por una de dinamic drivers porque no se que lei por hay que explodingboy habeces no iba bien y ni con esas y lo de los colores tampoco se han cambiado los he dejado tal y como tu me has dicho que segun la hexadecimal seria un tono granate como el tuyo y sigue estando igual de verdad que ya me da vergüenza pero ya dicen que si no preguntas no aprendes gracias por tu paciencia si me mandas a comer churros como no lo entendere por que es de manicomio lo mío :0

Responder
Gem@

yz Ni mucho menos te voy a mandar a comer churros (por cierto me encantan y si es con chocolate más aún)
Vamos a seguir probando hasta conseguir eliminar ese feo color.
Busca:
.post-footer a {
color: #fff;
}
.post-footer a:hover {
color: #eee;
}
El efecto hover responde al contrario, debería mostrase #eee al pasar el cursor y blanco sin pasarlo. Eliminemos eso y veamos si cambia.

Responder
Anónimo

hola soy yo de nuevo para¡¡ variar¡¡ si lo miras veras que ha cambiado pero solo en entradas recientes esta todo del mismo color que escogí pero las antiguas siguen de ese azul con violeta que tira para atras,o sea la entrada que ayer era azul hoy como ya es antigua me pasa a violeta raro,azul yo que se? respecto a las pestañas como veras na de na que jesus ala o en lo que creas te conserven la paciencia porque a ti te van a beatificar santa gema de los bloggers desamparados lo siento me voy del tema pero no me entra en la cabeza que le pasa a esta plantilla es que lo de los colores ni cambiando de plantilla se borra¡¡¡¡

Responder
Anónimo

lo de las pestañas por fin no se que he tocado pero se h puesto bien esos churros con chocolate te los mando si hace falta por fedex ole ole estoy como niño con zapatos nuevos pero que maja eres lo unico que no me quedan muy centradas se separan del texto pero eso ya sera en otro capitulo de momento ya tengo las pestañas que es lo que cuenta gracias

Responder
Gem@

yz Nafire si que veo las pestañas ahora mejor, pero aún las verías mejor o al menos no te ocasionaría problemas si en los estilos eliminas esa parte de <style type="text/css"> y </style> eso sólo lo añadimos si los estilos los situamos fuera de la hoja de estilos es decir, antes de <b:skin> o después de ]]></b:skin>
Sobre el tema de los colores en esos enlaces mándame la plantilla a mi correo y así lo veo co más claridad ¿ok?

Responder
Jean Murdock

¡Hola!

Tu blog es excelente. He logrado cambiar la plantilla de forma muy sencilla. El único problema es que ahora los títulos de las etiquetas se ven muy chiquitos. ¿Cómo podría aumentar el cuerpo?

¡Muchas gracias! ¡Todo esto es muy útil!

Responder
Jean Murdock

¡Hola de nuevo!

Otra pregunta: ¿cómo podría asociar cada pestaña a una dirección de blogger ya existente? O sea, ¿cómo incluir varios blogs mediante las etiquetas en uno solo? No sé si me explico. ¿Me explico?

¡Gracias por adelantado!
bertelmax

Responder
Gem@

yz bertelmax si te refieres al tamaño de fuente de las pestañas para las etiquetas puedes hacerlo en font-size:93%;
Este tipo de pestañas no hace la función de menú, únicamente trabaja con las etiquetas. Para poder enlazar sitios externos o incluso dentro del blog puedes utilizar un menú ;)

Responder
bertelmax

¡MUCHAS GRACIAS Gem@! Eres un encanto ;D

Responder
Gem@

yz No hay de qué bertelmax ¡suerte!

Responder
Anónimo

hola!!!! como podria poner el tipo menu E? esque he puesto el que tenias como ejemplo, el B, pero no soy capaz de cambiarlo

gracias

Responder
quimica san roque

hola!! cual seria el codigo o como podria poner el menu E

gracias y saludos

Responder
Gem@

yz quimica san roque te explico como hacerlo:

Los pasos a seguir son los mismos que viene explicados en la entrada, cambian los estilos de las etiquetas que son los siguientes.

/*- Menu Tabs E--------------------------- */

#tabsE {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;

}
#tabsE ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsE li {
display:inline;
margin:0;
padding:0;
}
#tabsE a {
float:left;
background:url("tableftE.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsE a span {
float:left;
display:block;
background:url("tabrightE.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsE a span {float:none;}
/* End IE5-Mac hack */
#tabsE a:hover span {
color:#FFF;
}
#tabsE a:hover {
background-position:0% -42px;
}
#tabsE a:hover span {
background-position:100% -42px;
}

Más abajo te añado la url de las imágenes, debes guardarlas en tu Pc y la subes a un servidor para conseguir la url y utilizar la tuya, si el autor elimina las imágenes o deja de funcionar su servidor como ya ocurrió una vez, las imágenes no se verán.

En el código anterior donde dice background:url("url-imagentableftE.gif") va la imagen siguiente:

http://exploding-boy.com/images/cssmenus/tabrightE.gif

Y en background:url("url-imagen-tabrightE.gif") la siguiente:

http://exploding-boy.com/images/cssmenus/tabrightE.gif

Responder
quimica san roque

GRACIAS!!!!!!!!!!!!!!!! muchisimas gracias!!

besos

Responder
Gem@

yz Suerte ;)

Responder
Alberto

Hola, buenos dias Gema. Estoy en la tarea de crear el blog, personalizandolo, investigando. ME gustaria poner las etiquetas como pestañas, pero no hay manera. Segui todos los pasos, pero al principio ya me encontre con que no puedo añadir elementos de pagina, ya que no aparece la opcion en el diseño (solamente aparece añadir widgets). en mi plantilla, tras expandir los elementos, solo me aparecen dos "showaddelemnt". Es normal, o sera cuestion de la plantilla?

Responder
Gem@

:: Hola Alberto, primeramente decirte que los cambios se hacen en la plantilla en edición de html no en plantilla de diseño por lo tanto n oes necesario añadir elementos de página ni gadgets o widgets que es lo que podemos añadir desde diseño.
Sobre showaddelement el cambio se hace donde dice
b:section class="header" id="header" maxwidgets="2" showaddelement="yes"
Lo que se consigue con eso es crear una nueva section donde se instalarán las etiquetas.
No es que no sea normal es algo que podemos modificar en cualquier parte de la plantilla.

Responder
Alberto

Gracias Gema, urgando un pocquito voy solucionando problems. A proposito, como haces para que en tu footer aparezca el diseño gráfico pegado al borde inferior? inclui una foto, pero siempre me aparece con margenes con respecto a la sección y comprobando la plantilla, tanto los margins como los paddings estan bien! Un saludo.

Responder
Gem@

:: Sería muy largo explicarlo aquí Alberto pero lo hice añadiendo un div después del footer y una imagen de fondo a ese div son las flores que ves.
Si quieres lo explico en una entrada.

Responder
Alberto

Hola de nuevo Gema, y gracias por tu paciencia. Sigo "remexendo" en el blog, ahora que tengo tiempo y acabo de descubrir un comportamiento extraño que no se resolver. Puse las etiquetas como pestañas, tal como indicas y ahora, cuando creo una entrada nueva y le asigno una etiqueta, al volver al blog, la fuente de esa parte (linkbar) aparece trastocada para la etiqueta de la entrada que acabo de introducir... (se queda mas grande) y para el resto de etiquetas (se vuelven mas pequeñas). Tienes idea de que puede ser ?
Una vez mas, gracias de antemano. Un saludo.

Responder
Gem@

:: Mira esta forma de hacerlo Alberto:
http://gemablog-.blogspot.com/2009/04/footer-imagen-y-color.html

Responder
Gem@

:: Mi respuesta anterior era para el tema del footer, el de las pestañas no veo ese problema el texto de las pestañas tiene en todas el mismo tamaño.

Responder
Alberto

Gracias por la contestacion Gema. En cuanto al tema de las pestañas, simplemente era que en el Widget que coloque debajo de la cabecera y en la que ordene que se pusieran las etiquetas, le di el fomato de nube y por eso, se alteraba la forma de todas ellas. En cuanto al pie, ya lo resolvi, modificando margins y paddings. Muchas gracias.

Responder
Gem@

:: Me alegra que esté resuelto y te agradezco el detalle de venir a contarlo :D

Responder
Anónimo

Hola Gema!
Estoy retocando el blog que creé para mi colegio, y quiero poner una barra de categorías horizontal, pero cuando busco el código no me aparece en la edición HTML de mi plantilla!!! Qué hago???? Gracias!

Responder
Anónimo

Gema, vuelvo a ser Judith, sigo explicándome... tú dices que para agregar el menú horizontal, hey que buscar en la edición HTML el código b:section class="header" id="header" maxwidgets="1" showaddelement="no" y no puedo encontrarlo dentro de los códigos de mi plantilla. La plantilla la busqué "naufragando" en internet e hice algunas modificaciones en el código (con la limitada habilidad que tengo para entenderlo) para añadir y quitar cositas. La dirección del blog es http://ef-escola-isabel-besora.blogspot.com/
A ver si me puedes decir algo.

Responder
Gem@

:: Hola Judith si no lo tienes igual algo por el estilo debes tener, esa línea está en todas las plantillas a no ser que la modificaran es la sección de la cabecera del blog.
La localizarás si buscas algo como header section.

Responder
Anónimo

Hola Gema! He buscado en mi plantilla "header section" y tampoco lo encuentro! No sé cómo está hecha esa plantilla!!! jajaja!!!
Dime en qué parte del HTML debo incluir el código para la barra horizontal(por ejemplo antes de "body" o "sidebar" o "footer" o...) y yo ya iré haciendo pruebas.

Gracias!

Responder
Gem@

:: Judith el problema no es no encuentres esa misma parte de header section porque lo que se trata de hacer es crear un espacio para añadir gadget justo después del header y a lo mejor ya lo tienes el problema sería no encontrar el resto de código que hay que reemplazar y aún así no sería problema porque siempre puedes crear un menú con pestañas a estilo de este ejemplo d ela entrada y enlazar cada pestaña con una categoría :)
No hay que añadir ningún código para la barra las pestañas aparecen automáticamente cuando se terminar de realizar todos los pasos :)

Responder
Sergio Valera

Hola Gema,
Enhoravuena por esta página sirve de muchísima ayuda.
La cosa es que he sxegudio todos los pasos y aun cambiando en todos los sitios donde pone tabsB por tabsC e incluso en la parte Menu Tabs B, pero aun así se me sigue viendo el estilo B!!
¿Que puedo hacer para conseguir el C?

Responder
Gem@

:: Sergio Valera Planas ¿has cambiado también donde dice al final div id='tabsB?

Responder
Sergio Valera

Si, lo cambie, pero nada O_o

Responder
Sergio Valera

Bueno, de todos ya no pasa nada, porque ya he pueston uno vertical, porque las horizontales ya me hacian más de una linea.
Por cierto... ¿Hay alguna manera de ordenar las pestañas de otra forma que no sea en orden alfabetico?

Responder
Gem@

:: Hasta donde yo sé las etiquetas se muestran según importancia y no en orden alfabético :S

Responder
Mario J. Vaughan

Hola, Gem@. Estoy queriendo ingresar una entrada en una de las pestañas pero no sé cómo hacerlo. Te agradecería me des tus recomendaciones.

Saludos!

Responder
Gem@

:: Mario Vaughan Ecólogo quizás lo más sencillo sería crear páginas de las que ahora dispone Blogger en lugar de una entrada y enlazarla con el menú:
http://gemablog-.blogspot.com/2010/05/enlazar-menu-con-paginas-estaticas.html

Responder
ayory

una pregunta pero estas pestañas funcionan dependiendo del diseño de plantilla que unos escoja.
por q por mas que eh probado no me funciona no me quedan las pestañas, y tengo como diseño de plantilla (las que biene por defecto) filigrana rosada.

mejor para q me des tu opinion de que estoy haciendo mal dejo el blog
http://ayorys.blogspot.com/

Responder
Gem@

:: Delia no hay problema en añadir estas pestañas, el único inconveniente es que el código a localizar sea distinto porque los ejemplos los hago sobre una plantilla Minima.
De todas formas si deseas añadir un menú puedes añadir cualquier menú que escojas y enlazar las etiquetas con el menú.

Responder
Anónimo

Hola Gem@ ¡¡

Ante todo , muy buen trabajo, muchas gracias.

He intentado hacer esto y aun ando en ello, aunque no es lo que yo queria, estaba pensando en pestañas, me viene bien y me gusta. Tengo 2 problemas, uno el color que ya lo ire hacieno y otro ¡, el mas grave, es que cuando posiciono el cursos en las etiquetas, este no se mueve, es decir no enlaza con los contenidos.
Puedes mirar mi blog ??

http://cubaisla.blogspot.com/

Muchas gracias

Responder
Gem@

:: Hola OSWALDO, por lo que veo lo que añadiste es un menú y veo algún error que se puede solucionar enlazando las etiquetas.
Por ejemplo busca en la sidebar la etiqueta que deseas enlazar, copia la url que aparece en ese momento en la barra del navegador para Hoteles sería http://cubaisla.blogspot.com/search/label/ de esa forma verás como enlace correctamente.

Responder
Dr. Bitsch

Hola trate de seguir todos los pasos pero cuando llego al punto 4, encuentro la 1ª línea azul, el resto no lo encuentro. Muchas gracias por la orientacion. FB

Responder
Gem@

:: No es extraño que así sea Dr. Bitsch, porque posterior a esta entrada Blogger lanzó las nuevas plantillas y su código es algo más confuso que las anteriores. La suya es de ese grupo que menciona de las nuevas plantillas.
De todas formas es algo que tengo solución ya que se puede añadir cualquier menú y enlazar las pestañas de menú con las categorías que el autor elija incluso enlazar desde el mismo menú cualquier otra cosa páginas estáticas, sitios externos ...
La siguiente url es la forma de configurar un menú, cualquier menú no tiene por qué ser el de la entrada.
http://gemablog-.blogspot.com/2009/02/anadir-enlazar-configurar-menus.html

Responder
Mitos Urbanos

Buenos días amigo, ya inserte todos los códigos como lo indicas respectivamente pero presento problemas para cambiar el color del menú, se ha quedado en un gris que casi no se aprecian las letras. ¿Será que estoy haciendo algo malo? agradecería tu ayuda para solventar esto.

Responder
Gem@

:: Saludos Mitos urbanos, eso lo puedes solucionar modificando el color de la fuente.
Hay que buscar lo siguiente y cambiar donde dice color: #fff; que es el color blanco por color: #000; que es color negro:
.tabs-inner .widget li a {
border-left: 1px solid #222222;
border-right: 1px solid #FFFFFF;
color: #fff;
display: inline-block;
font: 14px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
padding: 0.6em 1em;
}

Luego la misma operación para que al pasar el cursor las letras se vean en blanco, se busca:
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background-color: #000000;
color: #000000;
text-decoration: none;
}

y cambiamos el color negro por blanco.

Responder
Alberto

Hola Gem@

Yo tengo un problema con esto, me salen bien las etiquetas en forma de barra y eso, pero cuando pincho en una, la letra de lo que he seleccionado cambia. Puedes verlo en http://theclockworkbyte.blogspot.com estoy en fase de construccion con mi blog :-D espero que me puedas hechar una mano para solucionarlo

Un saludo

Responder
Frases Cristianas

Estaba haciendo todos los pasos pero lo ke me pasa es que el ultimo codigo q hay q sustituir no lo encuentro en mis codigos por favor ayudenme para resolver este problema mi correo es margarita_barreto89@yahoo.com

Responder
Teacher Rocío

Hola: he conseguido poner las pestañas debajo de la cabecera, pero ahora me sale un texto de estos raros, tipo código, justo encima del título que antes no me salía. ¿Qué puedo hacer para eliminarlo? gracias

Responder
Gem@

:: Teacher Rocío yo miraría si en diseño a la altura del crosscol hay añadido un gadget de texto con ese mismo texto que ves y como título dice "Welcolme!"

Responder
La de Lengua

Hola! Tengo un problema!Hice todos los pasos, uno por uno, pero cuando quiero guardar los cambios en html, me salta error 24, que el html va después y no sé qué cosas más.
¿Qué hago?
Espero tu respuesta!
Mil gracias.

Responder
La de Lengua

Me olvidaba!
La URL es www.pomponpunk.blogspot.com

Responder
Madera y Corazón

Hola!! Buenas tardes
Es muy bueno lo que tu haces con tu blog. Y de a poquito voy realizando el mio con tus tips.
Es un poco viejo este post.. pero recien empiezo yo a crear el mio, y esto me esta ayudando.
Necesitaria saber si existe alguna manera de modificar el fondo del blog dependiendo en que pestaña te encuentres.
O sea, por ejemplo, suponiendo que estas haciendo tu blog y en la pestaña "inicio" tienes color blanco de fondo y en la del mapa del sitio lo colocas de color verde (digo por decir, se que lo tienes blanco tambien).
Cuando te hagas un tiempo, espero tu respuesta
Desde ya gracias, por la ayuda dada con el blog, y por la futura que vayas a dar
Saludos

Responder
Gem@

:: Madera y corazón sería algo así??
http://gemablog-.blogspot.com/2010/07/opcion-para-que-las-visitas-escojan.html

Responder
Madera y Corazón

@Gem@

Por cierto olvide presentarme en el post anterior. Mi nombre es Diego, y le estoy realizando el blog a mi padre.
No es exactamente a eso a lo que me refiero.
Si puedes entrar a mi blog, observaras que tengo tres pestañas
"Inicio", "Folklore", y "Tango"
Con el fondo del blog y toda la decoracion.
Lo que a mi me gustaria hacer es poder cambiarle el color de fondo y letra dependiendo de en que pestaña estes.
O sea, "Inicio" dejarlo como está, si vas a "Folklore", celeste con blanco y "Tango" otro color..
Es posible realizar esto?
Creo haberme explicado mejor ahora.

Saludos

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top